<template>
  <!-- 消防设施 -- 消防栓 -->
  <view class="fireHydrant">
    <view class="wrapper">
      <view class="wrapper-item">
        <u-cell :titleStyle="titleStyle" title="是否有消防栓" clickable isLink :rightIconStyle="rightIconStyle"
          @click="cellClick('text', 'onFireHydrant')">
          <view slot="value" :class="form.onFireHydrantDesc ? 'cell-noEmpty' : 'cell-empty'">
            {{ form.onFireHydrantDesc || "请选择" }}
          </view>
        </u-cell>

        <block v-if="form.onFireHydrant == 1">
          <u-cell :titleStyle="titleStyle" title="消防栓数量（个）">
            <u-input v-model="form.fireHydrantCount" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
              placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="3" :required="true"
              @blur="connumBlur"></u-input>
          </u-cell>

          <view class="deal-title">
            消防栓图片
            <text>（可添加1—3张图片）</text>
          </view>
          <view class="upload-view">
            <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="3"
              :multiple="true" width="96" height="90">
              <image :src="baseImgUrl + 'upload-icon.png'" style="width: 192rpx; height: 180rpx"></image>
            </u-upload>
          </view>
        </block>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="navBack()">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="sunmitHandle">
        保存
      </button>
    </view>

    <u-picker v-if="pickerShow" :show="pickerShow" :columns="columns" :keyName="keyName" @confirm="showConfirm"
      @close="pickerClose" @cancel="pickerCancel" :closeOnClickOverlay="true"></u-picker>
  </view>
</template>

<script>
  import {
    publicSecurityDetail,
    publicSecuritySave
  } from "@/api/home.js";
  import {
    imagesPathList
  } from "@/api/myself.js";

  import {
    findEnableDictItemsbyCode
  } from "@/api/api.js";
  import {
    handleClickRouter,
    Toast,
    navBack,
    uniTrim,
    isNumber,
    useNetWork,
    isLoading,
    getHeader,
    uploadFile,
  } from "@/utils/util.js";
  import mixin from "@/utils/mixin.js";

  export default {
    name: "fireHydrant",
    mixins: [mixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        form: {},
        errorType: ["none"],
        options: {},
        fileList: [],
        fileNum: 0,
        pathList: [],
        imgPrefix: uni.getStorageSync("imgPrefix"),
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList();
    },
    methods: {
      handleClickRouter,
      navBack,
      /* cell 点击 */
      cellClick(name, type) {
        this.keyName = name;
        this.cellType = type;
        let code = "";
        switch (this.cellType) {
          case "onFireHydrant":
            code = "on_type";
            break;
          default:
            break;
        }

        findEnableDictItemsbyCode(code).then((res) => {
          this.columns[0] = res.result || [];
          this.pickerShow = true;
        });
      },
      /* 选择器 确定 */
      showConfirm(e) {
        let arr = e.value;
        if (arr.length) {
          let obj = arr[0];
          switch (this.cellType) {
            case "onFireHydrant":
              this.form.onFireHydrant = obj.value;
              this.form.onFireHydrantDesc = obj.title;

              if (obj.value != 1) {
                this.form.fireHydrantCount = "";
                this.form.pathList = [];
                this.fileList = [];
              }
              break;
            default:
              break;
          }
        }
        this.pickerShow = false;
      },
      connumBlur() {
        let {
          fireHydrantCount
        } = this.form;
        if (fireHydrantCount && !isNumber(fireHydrantCount)) {
          Toast("消防栓数量请输入正整数");
          return;
        }
      },
      afterRead(info) {
        useNetWork(); // 判断是否有网络
        isLoading();
        let _this = this;
        _this.fileNum = info.file.length;

        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 24,
              },
            })
            .then((res) => {
              let {
                fullPath,
                halfPath
              } = res.result;
              _this.fileList.push({
                url: fullPath
              });
              _this.pathList.push(halfPath);
              if (_this.pathList.length == _this.fileNum) {
                isLoading(false);
              }
            })
            .finally(() => {
              isLoading(false);
            })
        }
      },
      deletePic(e) {
        this.fileList.splice(e.index, 1);
        this.pathList.splice(e.index, 1);
      },
      sunmitHandle() {
        let {
          onFireHydrant,
          fireHydrantCount
        } = this.form;

        // 1：有    0：无
        if (!onFireHydrant) {
          Toast("请选择是否有消防栓");
          return;
        }

        if (onFireHydrant == 1) {
          if (!fireHydrantCount || !uniTrim(fireHydrantCount)) {
            Toast("请输入消防栓数量");
            return;
          }

          if (!isNumber(fireHydrantCount)) {
            Toast("消防栓数量请输入正整数");
            return;
          }

          if (!this.pathList.length) {
            Toast("请上传消防栓图片");
            return;
          }
        }

        let data = {
          companyMessageId: this.options.companyId,
          fireHydrantInfo: {
            onFireHydrant: onFireHydrant,
            fireHydrantCount: fireHydrantCount,
            pathList: this.pathList,
          },
        };

        console.log(data, "AAcc保存的");
        publicSecuritySave(data).then((res) => {
          if (res.code == 200) {
            Toast("保存成功");
            navBack();
          }
        });
      },
      getList() {
        publicSecurityDetail({
          companyId: this.options.companyId
        }).then(
          (res) => {
            if (res.code == 200) {
              console.log(res, "返回的");
              if (Object.keys(res.result).length == 0) return false;

              let {
                fireHydrantInfo
              } = res.result;
              if (fireHydrantInfo.onFireHydrant != null) {
                this.form = fireHydrantInfo;
                this.form.onFireHydrant =
                  fireHydrantInfo.onFireHydrant.toString();
                if (this.form.onFireHydrant != 1) {
                  this.form.fireHydrantCount = "";
                }

                if (this.form.onFireHydrant == 1) {
                  // 查询图片
                  imagesPathList({
                    bizId: this.form.id,
                    bizType: 8
                  }).then(
                    (res) => {
                      if (res.code == 200) {
                        for (var v of res.result) {
                          this.fileList.push({
                            url: this.imgPrefix + v.path,
                          });
                          this.pathList.push(v.path);
                        }
                      }
                    }
                  );
                }

                let {
                  on_type
                } = uni.getStorageSync("allCode");
                on_type.map((v) => {
                  if (v.value == fireHydrantInfo.onFireHydrant) {
                    this.form.onFireHydrantDesc = v.text;
                  }
                });
              }
            }
          }
        );
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .fireHydrant {
    flex: 1;
    background: #f9f9f9;

    .wrapper {
      height: calc(100vh - 92px);
      margin: 20rpx;
      overflow-y: auto;

      .wrapper-item {
        padding: 20rpx;
        margin-bottom: 20rpx;
        background: #fff;

        .deal-title {
          padding: 20rpx 30rpx;
          color: #666666;
          font-size: 30rpx;
          font-weight: 500;

          text {
            color: #bbbbbb;
            font-size: 24rpx;
          }
        }

        .upload-view {
          padding-left: 30rpx;
        }
      }
    }

    .btns {
      button {
        border-radius: 44rpx;
      }
    }
  }
</style>